<template>
  <!-- 超时提醒 -->
  <view class="remind">
    <pane-card v-for="(item, index) in remindList" :key="index" :title="item.desc">
      <view slot="sub-title">
        <text class="time block">{{ item.time }}</text>
          <progress :activeColor="item.status === 2 ? '#f0ad4e' : '#dd524d'" :percent="item.progress" show-info stroke-width="6" />
      </view>
      <view class="status" slot="right">
        <view :class="['tag', { warning: item.status === 2, error: item.status === 3 }]"><text>{{ item.status === 2 ? '即将超时' : '已超时' }}</text></view>
        <text class="block owner">{{ item.owner }}</text>
      </view>
    </pane-card>
    <v-empty :isShow="!remindList.length && showEmpty" text="暂无相关记录"></v-empty>
  </view>
</template>
<script>
  import PaneCard from '@/components/m-card/pane-card.vue';
  import Api from '@/api/main';
  import VEmpty from '@/components/v-empty/index.vue';
  export default {
    components: {
      PaneCard,
      VEmpty
    },
    data() {
      return {
        showEmpty: false,
        remindList: [
          // {
          //   time: '2021-10-29 11:00',
          //   desc: 'xxx的采样工作',
          //   // 0未开始，1已完成，2即将超时，3已超时
          //   status: 2,
          //   // 进度
          //   progress: 10,
          //   // 防疫人员
          //   owner: '章三',
          //   // 头像
          //   avator: ''
          // },
          // {
          //   time: '2021-10-29 12:00',
          //   desc: 'xxx的采样工作',
          //   // 0未开始，1已完成，2即将超时，3已超时
          //   status: 3,
          //   // 进度
          //   progress: 20,
          //   // 防疫人员
          //   owner: '里斯',
          //   // 头像
          //   avator: ''
          // }
        ]
      };
    },
    methods: {
      async getList() {
        uni.showLoading({
          title: '加载中...'
        });
        const res = await this.$http.post(Api.getTimeoutList);
        this.remindList = res || [];
        this.showEmpty = !this.remindList.length;
        console.log('remindList', this.remindList);
        uni.hideLoading();
      }
    },
    created() {
      this.getList();
    }
  };
</script>
<style lang="scss">
  .remind {
    width: 100%;
    padding: 20rpx 40rpx;

    .status {
      width: 150rpx;
      text-align: center;
      line-height: 2;
    }

    .tag {
      margin-bottom: 20rpx;
      text-align: center;
      border-radius: 16rpx;

      &.success {
        color: $uni-color-success;
        background-color: rgba($color: $uni-color-success, $alpha: 0.2);
      }

      &.warning {
        color: $uni-color-warning;
        background-color: rgba($color: $uni-color-warning, $alpha: 0.2);
      }

      &.error {
        color: $uni-color-error;
        background-color: rgba($color: $uni-color-error, $alpha: 0.2);
      }
    }

    .owner {
      color: $uni-sub-text-color;
    }
  }
</style>